
.activity_bgc{
    background: #fff;
    overflow: hidden;
    .activity{
        position: relative;
        width: 1216px;
        margin: 20px auto 0 auto;
        .activity-title{
            height: 24px;
            overflow: hidden;
            position: relative;
            margin-bottom: 26px;
            span{
                display: block;
                height: 24px;
                line-height: 24px;
                font-size: 22px;
                font-weight: bold;
                color: black;
                float: left;
            }
        }
        .activity-header{
            display: block;
            overflow: hidden;
            padding-bottom: 13px;
            margin-top: 30px;
            border-bottom: 2px solid #141414;
            li{
                float: left;
                margin-right: 43px;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                color: #242426;
                font-weight: 500;
                cursor: pointer;
                position: relative;
            }
            .sel{
                color: #007AFF;
                padding-left: 17px;
            }
            .sel::before{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #007AFF;
                content: "";
                position: absolute;
                top: 10px;
                left: 0px;
            }
        }
        .activity-warp{
            overflow: hidden;
            margin-top: 30px;
            ul{
                overflow: hidden;
                font-size: 0;
                margin-left: -16px;
                li{
                    overflow: hidden;
                    margin-bottom: 40px;
                    display: inline-block;
                    width: 33%;
                    .works-info{
                        display: block;
                        overflow: hidden;
                        position: relative;
                        margin-left: 16px;
                        .img{
                            display: block;
                            width: 100%;
                            height: 220px;
                            border-radius: 4px;
                            position: relative;
                            overflow: hidden;
                            img{
                                width: 100%;
                                height: 100%;
                                border-radius: 4px;
                                overflow: hidden;
                                transition: transform 0.5s;
                            }
                            scrollbar-highlight-color: rosybrown;
                            img:hover{
                                transform: scale(1.12);
                            }
                        }
                        span{
                            display: block;
                            overflow: hidden;
                            height: 25px;
                            line-height: 25px;
                            font-size: 18px;
                            color: #242426;
                            text-overflow: ellipsis;
                            margin: 20px 0 12px 0;
                            white-space: nowrap;
                        }
                        strong{
                            font-style: normal;
                            padding: 5px 12px;
                            position: absolute;
                            top: 0;
                            left: 0px;
                            font-family: "Microsoft YaHei,Source Han Sans CN,PingFangSC-Regular, sans-serif";
                            font-size: 14px;
                            color: #fff;
                            text-align: center;
                            display: block;
                            background: rgba(0, 0, 10, 0.5);
                            border-radius: 4px 0 4px 0;
                            i{
                                color: #ffd60a;
                                font-style: normal;
                                font-weight: 500;
                            }
                            em{
                                color: rgba(255, 255, 255, 0.6);
                                font-style: normal;
                                font-weight: 500;
                                margin: 0 4px;
                                width: 7px;
                                display: inline-block;
                            }
                            b{
                                color: rgba(255, 255, 255, 0.88);
                                font-weight: 400;
                            }
                        }
                    }
                    .works-content{
                        display: block;
                        height: 14px;
                        font-size: 14px;
                        font-weight: 500;
                        color: rgba(36, 36, 38, 0.65);
                        line-height: 14px;
                        margin: 0 0 16px 16px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        b{
                            font-style: normal;
                            font-weight: 500;
                        }
                    }
                    .activity-info{
                        overflow: hidden;
                        position: relative;
                        margin-left: 16px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        span{
                            font-size: 16px;
                            font-weight: 400;
                            color: #242426;
                            line-height: 16px;
                        }
                        b{
                            display: inline-block;
                            width: 120px;
                            height: 32px;
                            line-height: 32px;
                            text-align: center;
                            border-radius: 2px;
                            font-size: 14px;
                            font-weight: 400;
                            background: #017AFE;
                            color: #FFFFFF;
                        }
                        .start{
                            background: #F1F1F1;
                            color: rgba(0, 0, 10, 0.4);
                        }
                        .disabled {
                            background: rgba(1, 122, 254, 0.3);
                            color: rgba(240, 240, 245, 0.88);
                        }
                    }
                }
            }
            .show-more{
                width: 286px;
                    font-size: 14px;
                    margin: 4px auto 40px;
                    overflow: hidden;
                    cursor: pointer;
                    text-align: center;
                    color: rgba(36, 36, 38, 0.55);
                    height: 44px;
                    line-height: 44px;
                    background: #F8F9FA;
                    border-radius: 4px;
                    box-sizing: border-box;
                    border: 2px solid transparent;
            }
        }
    }
}